<!--弹窗输入内容组件-简单录入--业务-->
<template>
    <el-dialog v-model="mShow" :title="option.title" :close-on-click-modal="false" draggable destroy-on-close :align-center="option.center" :width="option.width">
        <el-scrollbar max-height="60vh">
            <m-form ref="formRef" :fields="option.fieldList" :value="mValue" :readonly="readonly" :bind-change="option.bindChange"></m-form>
        </el-scrollbar>
        <template #footer>
              <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="dialogConfirm">确定</el-button>
              </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import {defineProps,defineEmits,watch,reactive,ref,defineExpose} from 'vue'

    import MForm from '@/components/common/Form/Form'

    const props = defineProps(['option','data','show','readonly']),
      emit = defineEmits(['confirm','update:show']);

    let mValue = reactive({}),
      mShow = ref(false),
      formRef = ref(null);
    watch(() => props.data,(val) =>{
      val !== undefined && (mValue = val)
    },{immediate: true});

    watch(() => props.show,(val) => {
      // if (val) mShow.value = true;
      mShow.value = val;
    })
    watch(mShow,(val) => {
      if (!val) emit('update:show',false)
    })

    function dialogConfirm() {
      formRef.value.validate(valid =>{
        console.log('验证',valid);
        console.log('mValue',mValue);
        if (valid) {
          // console.log(formRef.value.data);
          let obj = {
            option: props.option,
            data: mValue
          };
          emit('confirm',obj)
        }
      })
    }

    function close() {
      mShow.value = false;
    }
    defineExpose({close})

</script>

<style scoped>

</style>
